<!DOCTYPE html>
<html>

<head>
    <script type="text/javascript" src="./js/routerJump.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>分类</title>
</head>

<body>

    <div class="container">
        <div class="head_guide_two">
            <div class="goBack_two">
                <img src="./Images/back.png">
            </div>
            <div class="title_two">首页</div>
            <div class="empty"></div>
        </div>
        <div class="main">
            <div class="main_l">
                <div class="main_l_in" id="1">
                    推荐
                </div>
                <div class="main_l_in" id="2">
                    XiaoMi 手机
                </div>
                <div class="main_l_in" id="3">
                    Redimi手机
                </div>
                <div class="main_l_in" id="4">
                    游戏手机
                </div>
                <div class="main_l_in" id="5">
                    电脑平板
                </div>
                <div class="main_l_in" id="6">
                    智能穿戴
                </div>
                <div class="main_l_in" id="7">
                    电视
                </div>
                <div class="main_l_in" id="8">
                    大家电
                </div>
                <div class="main_l_in" id="9">
                    小家电
                </div>
                <div class="main_l_in" id="10">
                    智能居家
                </div>
                <div class="main_l_in" id="11">
                    出行运动
                </div>
                <div class="main_l_in" id="12">
                    日用百货
                </div>
                <div class="main_l_in" id="13">
                    儿童用品
                </div>
                <div class="main_l_in" id="14">
                    有品精选
                </div>
                <div class="main_l_in" id="15">
                    小米服务
                </div>
                <div class="main_l_in" id="16">
                    XiaoMi 手机
                </div>
                <div class="main_l_in" id="17">
                    Redimi手机
                </div>
                <div class="main_l_in" id="18">
                    游戏手机
                </div>
                <div class="main_l_in" id="19">
                    电脑平板
                </div>
                <div class="main_l_in" id="20">
                    智能穿戴
                </div>
                <div class="main_l_in" id="21">
                    电视
                </div>
                <div class="main_l_in" id="22">
                    大家电
                </div>
                <div class="main_l_in" id="23">
                    小家电
                </div>
            </div>
            <div class="main_r">
                <div class="main_r_top">
                    <img src="https://cdn.cnbj1.fds.api.mi-img.com/product-images/mi12s-provuejwm/70.png">
                </div>
                <div class="main_r_scroll">
                    <ul>
                        <li>Xiaomi MIX系列</li>
                        <li>Xiaomi Civi</li>
                        <li>Xiaomi 手机配置</li>
                        <li>Xiaomi 小米精选</li>
                        <li>Xiaomi 小米有品</li>
                        <li>Xiaomi 数字系列</li>
                    </ul>
                </div>
                <div class="main_r_prefecture">
                    <div class="main_r_prefecture_title">
                        XiaoMi MIX 系列
                    </div>
                    <div class="main_r_prefecture_box">
                        <div class="main_r_prefecture_box_img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                        </div>
                        <div class="main_r_prefecture_box_r">
                            <div class="main_r_prefecture_box_r_one">Xiaomi MIX Fold 2</div>
                            <div class="main_r_prefecture_box_r_two">￥8999起</div>
                        </div>
                    </div>
                    <div class="main_r_prefecture_box">
                        <div class="main_r_prefecture_box_img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                        </div>
                        <div class="main_r_prefecture_box_r">
                            <div class="main_r_prefecture_box_r_one">Xiaomi MIX Fold 2</div>
                            <div class="main_r_prefecture_box_r_two">￥8999起</div>
                        </div>
                    </div>
                    <div class="main_r_prefecture_box">
                        <div class="main_r_prefecture_box_img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                        </div>
                        <div class="main_r_prefecture_box_r">
                            <div class="main_r_prefecture_box_r_one">Xiaomi MIX Fold 2</div>
                            <div class="main_r_prefecture_box_r_two">￥8999起</div>
                        </div>
                    </div>
                    <div class="main_r_prefecture_box">
                        <div class="main_r_prefecture_box_img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                        </div>
                        <div class="main_r_prefecture_box_r">
                            <div class="main_r_prefecture_box_r_one">Xiaomi MIX Fold 2</div>
                            <div class="main_r_prefecture_box_r_two">￥8999起</div>
                        </div>
                    </div>
                    <div class="main_r_prefecture_box">
                        <div class="main_r_prefecture_box_img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                        </div>
                        <div class="main_r_prefecture_box_r">
                            <div class="main_r_prefecture_box_r_one">Xiaomi MIX Fold 2</div>
                            <div class="main_r_prefecture_box_r_two">￥8999起</div>
                        </div>
                    </div>
                </div>
                <div class="main_r_prefecture">
                    <div class="main_r_prefecture_title">
                        XiaoMi MIX 系列
                    </div>
                    <div class="main_r_prefecture_box">
                        <div class="main_r_prefecture_box_img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                        </div>
                        <div class="main_r_prefecture_box_r">
                            <div class="main_r_prefecture_box_r_one">Xiaomi MIX Fold 2</div>
                            <div class="main_r_prefecture_box_r_two">￥8999起</div>
                        </div>
                    </div>
                    <div class="main_r_prefecture_box">
                        <div class="main_r_prefecture_box_img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                        </div>
                        <div class="main_r_prefecture_box_r">
                            <div class="main_r_prefecture_box_r_one">Xiaomi MIX Fold 2</div>
                            <div class="main_r_prefecture_box_r_two">￥8999起</div>
                        </div>
                    </div>
                    <div class="main_r_prefecture_box">
                        <div class="main_r_prefecture_box_img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                        </div>
                        <div class="main_r_prefecture_box_r">
                            <div class="main_r_prefecture_box_r_one">Xiaomi MIX Fold 2</div>
                            <div class="main_r_prefecture_box_r_two">￥8999起</div>
                        </div>
                    </div>
                    <div class="main_r_prefecture_box">
                        <div class="main_r_prefecture_box_img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                        </div>
                        <div class="main_r_prefecture_box_r">
                            <div class="main_r_prefecture_box_r_one">Xiaomi MIX Fold 2</div>
                            <div class="main_r_prefecture_box_r_two">￥8999起</div>
                        </div>
                    </div>
                    <div class="main_r_prefecture_box">
                        <div class="main_r_prefecture_box_img">
                            <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1660117297.65685839.png">
                        </div>
                        <div class="main_r_prefecture_box_r">
                            <div class="main_r_prefecture_box_r_one">Xiaomi MIX Fold 2</div>
                            <div class="main_r_prefecture_box_r_two">￥8999起</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer_guide">
            <div class="footer_guide_in footer_guide_home">
                <div class="footer_guide_in_top">
                    <img src="./Images/home2.png">
                </div>
                <div class="footer_guide_in_bottom">
                    首页
                </div>
            </div>
            <div class="footer_guide_in footer_guide_category">
                <div class="footer_guide_in_top">
                    <img src="./Images/categoey.png">
                </div>
                <div class="footer_guide_in_bottom">
                    分类
                </div>
            </div>
            <div class="footer_guide_in footer_guide_myself">
                <div class="footer_guide_in_top">
                    <img src="./Images/headImg1.jpg">
                </div>
                <div class="footer_guide_in_bottom">
                    我的
                </div>
            </div>
            <div class="footer_guide_in footer_guide_shopping">
                <div class="footer_guide_in_top">
                    <img src="./Images/shoppingCar.png">
                </div>
                <div class="footer_guide_in_bottom">
                    购物车
                </div>
            </div>
            <div class="footer_guide_in footer_guide_myself">
                <div class="footer_guide_in_top">
                    <img src="./Images/myself.png">
                </div>
                <div class="footer_guide_in_bottom">
                    暂定
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    var startX = 0;
    var check = 0
    var ulFather = document.querySelector('.main_r_scroll')
    var ul = ulFather.querySelector('ul')
    ul.addEventListener('touchstart', function (e) {
        startX = e.targetTouches[0].pageX
        e.preventDefault()
    })
    ul.addEventListener('touchmove', function (e) {
        e.preventDefault()
        moveX = e.targetTouches[0].pageX
        check = startX - moveX
        // console.log(check)
        if (Number(check) > 1000) {
            // ul.style.transform = 'translateX(' + check + 'px)'
        }
        ul.style.transform = 'translateX(' + -check + 'px)'
    })
    ul.addEventListener('touchend', function (e) {
        e.preventDefault()
        console.log('check',Math.floor(check))
        if(Math.floor(check)>1000){
            ul.style.transform='translateX(' + -check + 'px)'
        }
        // ul.style.transition='all .5s'
        // ul.style.transform = 'translateX('+(-check)+'px)'
    })
    var allButton = document.querySelectorAll('.main_l_in')
    //记录id
    var id = 0;
    for (var i = 0; i < allButton.length; i++) {
        allButton[i].addEventListener('click', function (e) {
            var orignId = document.getElementById(new String(id))
            if (orignId == null) {
                id = e.target.id
                e.target.style.borderLeft = '10px solid orange' 
            } else {
                orignId.style.borderLeft = ''
                id = e.target.id
                e.target.style.borderLeft = '10px solid orange'
                var title=document.getElementById(new String(id))
                var titleAll=document.querySelectorAll('.main_r_prefecture_title')
                titleAll[0].innerText=title.innerText
                titleAll[1].innerText=title.innerText+'系列'
            }
           

            if (e.target.innerText == "XiaoMi 手机" || e.target.innerText == '智能穿戴' || e.target.innerText == '儿童用品') {
                changeImg(xiaomiPhone, 7)
            }
            if (e.target.innerText == "Redimi手机" || e.target.innerText == '电视' || e.target.innerText == '日用百货') {
                changeImg(hongmiPhone, 7)
            }
            if (e.target.innerText == "游戏手机" || e.target.innerText == '大电视' || e.target.innerText == '出行运动') {
                changeImg(hongmiPhone, 7)
            }
            if (e.target.innerText == "电脑平板" || e.target.innerText == '小家电' || e.target.innerText == '推荐') {
                changeImg(flatPhone, 7)
            }
        })
    }

    function changeImg(title, number) {
        var allImg = document.querySelectorAll('.main_r_prefecture_box_img')
        for (var h = 0; h < 10; h++) {
            var randomNumber = Math.floor(Math.random(number) * number)
            allImg[h].children[0].src = title[randomNumber]
        }

    }

    function packingFor(len, target) {


    }

    var allLi = document.querySelectorAll('.main_r_scroll ul li')
    for (var i = 0; i < allLi.length; i++) {
        allLi[i].addEventListener('click', function () {

        })
    }

    var xiaomiPhone = [
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/211bb83776a8e0c8358732c3f3aa2864.png?thumb=1&w=200&h=200&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011841_084ed41d67f248677914605b73faf582.png?thumb=1&w=200&h=200&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207012000_0b9df066c110f201154013ac373df1d9.png?thumb=1&w=200&h=200&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202207011810_86ad513472d1423a3fdec8d7d5107038.png?thumb=1&w=200&h=200&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208101511_488638d8f8d5dbcf3b66cd82703ecfb9.png?thumb=1&w=200&h=200&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=200&h=200&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261921_a1b840c267bd26bcf4dc654d52f259e5.png?thumb=1&w=200&h=200&f=webp&q=90"
    ]
    var hongmiPhone = [
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e690d968320c356b7a09c8f63bc6ef8d.jpg",
        "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1595400896.0831679.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a778f1199c659c21c7b0dfe37d443a12.png",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208101508_df890f7fafc29921ded695b2af591190.png",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202205221513_4a54fc6db0b3bb27b77c5bab1d11b26d.png",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d13f434be6b12bd9b5486247425eca6f.png",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55098d0d1d85c73c6bfc07e88fb9a3a3.png"
    ]
    var gamePhone = [
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/cbadf8917627a3a80cc61f3d95f48cfb.png",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d915b4d84f977e4d8b68ee18d31c9b5.png",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f5d5806d6807671fd2a28d9a944b5358.png",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208101511_488638d8f8d5dbcf3b66cd82703ecfb9.png?thumb=1&w=200&h=200&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=200&h=200&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261921_a1b840c267bd26bcf4dc654d52f259e5.png?thumb=1&w=200&h=200&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/55098d0d1d85c73c6bfc07e88fb9a3a3.png"
    ]

    var flatPhone = [
        "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg",
        "https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1640767473.19941710.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209221025_d70124b70e703065e71e66e54db80ccb.png",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7d4b9d5790e07d2fe68864f76095ec56.jpg",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202208101511_488638d8f8d5dbcf3b66cd82703ecfb9.png?thumb=1&w=200&h=200&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a687e796bb4879cd0e93867177f800da.png?thumb=1&w=200&h=200&f=webp&q=90",
        "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202209261921_a1b840c267bd26bcf4dc654d52f259e5.png?thumb=1&w=200&h=200&f=webp&q=90"
    ]

    var allImg = document.querySelectorAll('.main_r_prefecture_box_img')
    var pathName = window.location.pathname
    var footerAll=document.querySelectorAll('.footer_guide_in_top')
    if(pathName.includes('Index')){
        var indexImg='./Images/replaceIndex.png'
        var index='./Images/home2.png'
       changeImgAndText(footerAll[0],indexImg,index)
        
    }else if(pathName.includes('Category')){
        var categoryImg='./Images/replaceCategory.png'
        var category='./Images/categoey.png'
        changeImgAndText(footerAll[1],categoryImg,category)
    }else if(pathName.includes('Shopping')){
        var shoppingImg='./Images/replaceShopping.png'
        var shopping='./Images/shoppingCar.png'
        changeImgAndText(footerAll[3],shoppingImg,shopping)
    }

    function changeImgAndText(element,replaceImg,orginImg){
        var currentImg=element.children[0].src
        if(currentImg.includes('replace')){
          element.children[0].src=orginImg
          element.nextSibling.nextSibling.style.color='black'
        }else{
        element.children[0].src=replaceImg
        element.nextSibling.nextSibling.style.color='orangered'
        }
    }

</script>
<script type="text/javascript" src="./js/routerJump.js"></script>
<link rel="stylesheet" href="./css/All.css">
<link rel="stylesheet" href="./css/Category.css">

</html>